<template>
    <div class="home" style="background-color: #5FB878;width: 100%; font-family: 华文行楷">
        <br/>
        <div class="banner">
            <h1>欢迎来到医疗云</h1>
            <p>Welcome to the Healthcare Cloud</p>
            <h1>一个可以找到您需要的所有信息的地方</h1>
            <p>A place where you can find all the information you need</p>
            <button>Get started</button>
        </div>
        <div class="services">
            <h2>我们的服务</h2>
            <div class="service" style="background-color: #009688;border-radius: 30px">
                <i class="fas fa-search"></i>
                <h3 style="font-size: 35px">系统管理</h3>
                <p style="font-size: 25px">主要包括科室管理、用户管理、角色管理、菜单管理、字典管理、通知公告、登录及操作的日志查看、检查费用设置、挂号费用设置等功能。</p>
            </div>
            <div class="service" style="background-color: #2F4056;border-radius: 30px">
                <i class="fas fa-code"></i>
                <h3 style="font-size: 35px">数据统计</h3>
                <p style="font-size: 25px">包含收支统计、药品销售统计、检查项目统计、年底报表统计、工作量统计等。</p>
            </div>
            <div class="service" style="background-color: #FFB800;border-radius: 30px">
                <i class="fas fa-code"></i>
                <h3 style="font-size: 35px">药品进销存</h3>
                <p style="font-size: 25px">主要是对药品的信息、库存信息、采购信息的维护。</p>
            </div>
            <div class="service" style="background-color: #1E9FFF;border-radius: 30px">
                <i class="fas fa-code"></i>
                <h3 style="font-size: 35px">收费管理</h3>
                <p style="font-size: 25px">主要包括处方收费、退费等信息。</p>
            </div>
            <div class="service" style="background-color: #FFB6C1;border-radius: 30px">
                <i class="fas fa-mobile-alt"></i>
                <h3 style="font-size: 35px">检查管理</h3>
                <p style="font-size: 25px">主要用于挂号就诊项、检查结果的诊断等。</p>
            </div>
            <div class="service" style="background-color: #FAEBD7;border-radius: 30px">
                <i class="fas fa-mobile-alt"></i>
                <h3 style="font-size: 35px">看病就诊</h3>
                <p style="font-size: 25px">包含门诊挂号、新开就诊、我的排班和医生排班、患者库等。</p>
            </div>
        </div>
        <div class="about">
            <h2>关于我们</h2>
            <p style="font-size: 30px">About Us</p><br/><br/>
            <h2>云医疗力于帮助医生提高诊疗服务效率,接待更多患者：帮助医院提高形象,增加经济效益,提高患者就诊满意度。</h2>
            <p style="font-size: 30px">Cloud healthcare helps doctors improve the efficiency of diagnosis and treatment services and receive more patients: help hospitals improve their image, increase economic benefits, and improve patient satisfaction.</p>
        </div>
        <div class="contact">
            <h2>联系我们</h2>
            <form>
                <input type="text" placeholder="姓名">
                <input type="email" placeholder="邮箱">
                <textarea placeholder="信息"></textarea>
                <button>发送</button>
            </form>
            <br/>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'Home'
    }
</script>

<style>
    .home {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .banner {
        background-image: url("../assets/home/home.jpg");
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        /*background: #f5f5f5;*/
    }

    .banner h1 {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .banner p {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .banner button {
        padding: 10px 20px;
        border: none;
        background: #333;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .services {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 80px 0;
        font-size: 30px;
    }

    .service {
        width: 300px;
        padding: 40px 20px;
        margin: 20px;
        text-align: center;
        background: #f5f5f5;
    }

    .service i {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .service h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .service p {
        font-size: 18px;
    }

    .about {
        margin: 80px 0;
    }

    .about h2 {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .about p {
        font-size: 18px;
        line-height: 1.5;
    }

    .contact {
        margin: 80px 0;
    }

    .contact h2 {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .contact form {
        display: flex;
        flex-direction: column;
    }

    .contact input,
    .contact textarea {
        padding: 10px;
        margin-bottom: 20px;
        border: none;
        border-radius: 5px;
    }

    .contact input {
        height: 40px;
    }

    .contact textarea {
        height: 200px;
    }

    .contact button {
        padding: 10px 20px;
        border: none;
        background: #333;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }
</style>
